/**
 * Created by zzc on 2017/9/13.
 */

import React,
{PureComponent} from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    PixelRatio} from 'react-native'

import {deviceWidth} from '../../base/util/ScreenUtil'

const color = {
    theme: '#06C1AE',
    border: '#e0e0e0',
    background: '#f3f3f3'
}
import { Actions } from 'react-native-router-flux';

export default class DiscoverCell extends PureComponent {

    render() {
        let {info} = this.props;
        let mobileMainImg = info.mobileMainImg;
        let title = info.title;
        let tag = info.isComment=='0'?'阅读':'互动'+" · " + info.classifyName;
        let desc = info.viceTitle;
        let thumbupCount = info.thumbupCount;
        let imageThumpup = info.isThumbup == '0' ? require('../../resource/images/icon_discoverer_like_empty.png'):
            require('../../resource/images/icon_discoverer_like_solid.png');
        return (
            <TouchableOpacity style={styles.container} onPress={() => Actions.discoverDetail({ url: info.url+"?showcomment=false&isapp=android"})}>
                <Image source={{uri: mobileMainImg+"@1080w_600h_100Q"}} style={styles.icon} />
                <Text style={styles.title}>{title}</Text>
                <Text style={styles.tag}>{tag} </Text>
                <Text style={styles.desc}>{desc} </Text>
                <View style={{height:1,backgroundColor:'#dddddd',marginTop:5}}></View>

                <View style={{flexDirection:'row',paddingLeft:5,paddingRight:5,paddingBottom:5,paddingTop:5,alignItems:'center'}}>

                    <View style={{flexDirection:'row'}}>

                        <Text style={styles.top}>置顶</Text>
                        <Image source = {require('../../resource/images/icon_discoverer_top.png')}
                               style={styles.imageTop}></Image>
                    </View>

                    <View style={{flex:1,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                        <Text style={{color:'black',fontSize:16}}>{thumbupCount}</Text>
                        <Image source = {imageThumpup} style={styles.image}></Image>
                        <Image source = {require('../../resource/images/icon_discoverer_share.png')} style={styles.image}></Image>
                    </View>

                </View>

            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        backgroundColor: 'white',
        marginLeft:5,
        marginRight:5,
        marginTop:10,
        padding:5
    },
    icon: {
        height: 165,
        resizeMode:"cover"
    },
    rightContainer: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },
    title: {
        fontSize: 17,
        marginTop:5,
        color: 'black',
    },
    tag:{
        fontSize: 13,
        marginTop:7,
        color: '#b8e986',
    },
    desc: {
        fontSize:15,
        color:'#8F8E94',
        marginTop:7
    },
    top: {
        fontSize:13,
        color:'#FFB233',
    },
    image: {
        width:30,
        height:30,
    },

    imageTop: {
        width:10,
        height:10
    },
})